<template>
  <div class="login">
    <div class="login-form">
      <h3 class="login-title">
        {{ loginForm.loginType == "account" ? "账号" : "邮箱" }}登录
      </h3>
      <div
        class="changeType"
        :class="loginForm.loginType == 'email' ? 'c-type' : ''"
        @click="changeType"
      >
        <i class="el-icon-sort-down"></i>
        <i class="el-icon-sort-up"></i>
      </div>
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        label-position="left"
        label-width="0px"
      >
        <el-form-item prop="userno" v-if="loginForm.loginType == 'account'">
          <el-input
            autocomplete="new-password"
            v-model="loginForm.userno"
            type="text"
            prefix-icon="el-icon-user"
            placeholder="账号"
            size="medium"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="email" v-else>
          <el-input
            autocomplete="new-password"
            v-model="loginForm.email"
            type="text"
            prefix-icon="el-icon-message"
            placeholder="账户邮箱"
            size="medium"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            autocomplete="new-password"
            v-model="loginForm.password"
            :type="showPassword ? 'text' : 'password'"
            prefix-icon="el-icon-lock"
            placeholder="密码"
            @keyup.enter.native="handleLogin"
            size="medium"
            ><i
              slot="suffix"
              class="el-input__icon el-icon-view ui-cous"
              @click="showPassword = !showPassword"
            ></i
          ></el-input>
        </el-form-item>

        <el-form-item prop="code">
          <div class="ui-flex">
            <el-input
              v-model="loginForm.code"
              placeholder="验证码"
              @keyup.enter.native="handleLogin"
              class="ui-flex-1"
              size="medium"
            >
              <svg-icon
                slot="prefix"
                icon-class="validCode"
                class="el-input__icon input-icon ui-mgl-6"
              />
            </el-input>
            <div class="login-code">
              <img :src="codeUrl" @click="getCode" />
            </div>
          </div>
        </el-form-item>

        <el-form-item style="width: 100%">
          <el-button
            :loading="loading"
            size="medium"
            type="primary"
            style="width: 100%"
            @click.native.prevent="handleLogin"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>

        <el-form-item style="width: 100%">
          <div class="ui-flex">
            <el-button size="medium" type="text" @click="forgetPassword">
              忘记密码？
            </el-button>
            <div class="ui-flex-1"></div>
            <el-button size="medium" type="text" @click="register">
              注册
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <!--  底部  -->
    <footer />
  </div>
</template>

<script>
import { encrypt } from "@/utils/rsaEncrypt";
import Footer from "./footer.vue";
import * as sysTool from "@/utils/systemTool"; //  获取浏览器信息
import { getWsLocation } from "@/api/http/login.js";
export default {
  name: "Login",
  components: { Footer },
  data() {
    return {
      cookiePass: "",
      loginForm: {
        userno: "",
        password: "",
        code: "",
        email: "",
        loginType: "account",
      },
      loginRules: {
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        userno: [
          { required: true, trigger: "blur", message: "用户名不能为空" },
        ],
        password: [
          { required: true, trigger: "blur", message: "密码不能为空" },
        ],
        code: [{ required: true, trigger: "blur", message: "验证码不能为空" }],
      },
      loading: false,
      codeUrl: "",
      showPassword: false,
      ad_info: {
        nation: "",
        province: "",
        city: "",
        district: "",
        adcode: "",
      },
    };
  },
  created() {
    this.getCode();
    this.getLocation();
    // IP = returnCitySN['cip'] // ip
    // adress = returnCitySN["cname"] // 地址
  },
  methods: {
    /**
     * @Author: Songjq
     * @Date: 2022-01-23 16:16:02
     * @Fn: 获取当前访问者的地理位置
     */
    getLocation() {
      getWsLocation({
        ip: returnCitySN["cip"],
        key: "UO3BZ-IIVCD-EQJ4A-PPTHU-LBT6T-ADF5H",
      })
        .then((res) => {
          if (res.result) {
            this.ad_info = res.result.ad_info;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    /**
     * @Author: Songjq
     * @Date: 2022-01-19 14:43:05
     * @Fn: 切换登陆类型
     */
    changeType() {
      this.loginForm.loginType =
        this.loginForm.loginType == "account" ? "email" : "account";
      this.$refs.loginForm.resetFields();
    },
    /**
     * @Author: Songjq
     * @Date: 2021-12-16 21:37:53
     * @Fn: 获取验证码
     */
    getCode() {
      this.codeUrl = `${process.env.VUE_APP_BASE_API}api/code?${Math.random()}`;
    },

    /**
     * @Author: Songjq
     * @Date: 2021-12-16 21:38:05
     * @Fn: 登录
     */
    async handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        const uuid = encrypt(
          JSON.stringify({
            ipaddr: returnCitySN["cip"],
            location: `${this.ad_info.nation},${this.ad_info.province},${this.ad_info.city}`,
            browser: sysTool.GetCurrentBrowser(),
          })
        );
        const user = {
          ...this.loginForm,
          password: encrypt(this.loginForm.password),
          uuid,
        };
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("Login", user)
            .then((user) => {
              this.loading = false;
              this.$router.push({ path: "/" });
            })
            .catch((err) => {
              this.loading = false;
              this.getCode();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    /**
     * @Author: Songjq
     * @Date: 2022-01-18 10:09:24
     * @Fn: 注册
     */
    register() {
      this.$router.push({
        path: "/register",
      });
    },
    /**
     * @Author: Songjq
     * @Date: 2022-01-18 17:50:13
     * @Fn: 忘记密码
     */
    forgetPassword() {
      this.$router.push({
        path: "/forgetPassword",
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" scoped lang="scss">
</style>
